<template>
	<div class="shujuyanjiu">
		<toubu></toubu>
		<div class="banner_tou">
			<img src="../assets/img/shujuyanjiu_banner.png" />
		</div>
		<div class="shujuyanjiu1">
			<div class="shujuyanjiu2">
				<div class="shujuyanjiu2_1">
					<ul>
						<li>
							<img v-if="shuyi" src="../assets/img/sanliu1.png" />
							<img v-else src="../assets/img/sanliu.png" />
							<span>榜单解读</span>
						</li>
						<li>
							<img v-if="shuer" src="../assets/img/saner1.png" />
							<img v-else src="../assets/img/saner.png" />
							<span>数据报告</span>
						</li>
						<li>
							<img v-if="shusan" src="../assets/img/sanyi1.png" />
							<img v-else src="../assets/img/sanyi.png" />
							<span>大咖专访</span>
						</li>
						<li>
							<img v-if="shusi" src="../assets/img/sansan1.png" />
							<img v-else src="../assets/img/sansan.png" />
							<span>内容创作</span>
						</li>
						<li>
							<img v-if="shuwu" src="../assets/img/sansi1.png" />
							<img v-else src="../assets/img/sansi.png" />
							<span>商业变现</span>
						</li>
						<li>
							<img v-if="shuliu" src="../assets/img/sanwu1.png" />
							<img v-else src="../assets/img/sanwu.png" />
							<span>平台玩法</span>
						</li>
					</ul>
					<div class="xiaxian"></div>
				</div>
				
				<bangdan></bangdan>
				
			</div>
			<div class="shujuyanjiu3">
				<div class="shuju_darenbang">
					<div class="shuju_darenbang1">
						<span>达人榜</span>
					</div>
					
					<div class="daren_tu">
						<img src="../assets/img/darentu.png" />
						<div class="daren_yin">
							<div class="daren_yin1">
								<div class="shipin_dianzan">
									榜单解读
								</div>
							</div>
							<div class="daren_yin2">
								<p>8月没拍MCN达人榜单|深码美拍加联合</p>
								<p>
									2020-09-27
								</p>
							</div>
						</div>
					</div>
					
					<div class="darenbang_shu" v-for="(item,index) in 5" :key="index">
						<span>
							8月没拍MCN达人榜单|深加联合
						</span>
						<span>
							2020-09-27
						</span>
					</div>
				</div>
				
				<div class="shuju_renzi">
					<div class="shuju_renzi1">
						<span>热门资讯</span>
					</div>
					
					<div class="remenzixun">
						<ul>
							<li v-for="(item,index) in 8" :key="index">
								<span>
									<img src="../assets/img/huo1.png" />
								</span>
								<span>
									8月没拍MCN达人榜单|深加联合8月没拍MCN达人榜单|深加联合
								</span>
								<span>
									1天前
								</span>
							</li>
						</ul>
						<div class="shuju_huatu">
							<img src="../assets/img/huo2.png" />
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<foot></foot>
	</div>
</template>

<script>
	//头部
	import toubu from "@/components/components/qianzou/header.vue"
	//榜单解读滑动切换
	import bangdan from "@/components/components/qianzou/shujuyanjiu/huadong.vue"
	//底部
	import foot from "@/components/components/qianzou/foot.vue"
	export default{
		name:"shujuyanjiu",
		components:{
			toubu,
			bangdan,
			foot
		},
		data(){
			return{
				shuyi:false,
				shuer:false,
				shusan:false,
				shusi:false,
				shuwu:false,
				shuliu:false,
			}
		},
		mounted:function(){
			var _self=this;
			//获取页面标题
			// console.log(window.document.title)
			
			_self.shuyi=true;
			
			
			console.log($(".shujuyanjiu2").offset().top,"top");
			
			
			//榜单解读等点击动画
			$(".shujuyanjiu2_1 ul li").click(function(){
				if($(this).index()==0){
					_self.shuyi=true;
					
					_self.shuer=false;
					_self.shusan=false;
					_self.shusi=false;
					_self.shuwu=false;
					_self.shuliu=false;
				}else if($(this).index()==1){
					_self.shuer=true;
					
					_self.shuyi=false;
					_self.shusan=false;
					_self.shusi=false;
					_self.shuwu=false;
					_self.shuliu=false;
				}else if($(this).index()==2){
					_self.shusan=true;
					
					_self.shuer=false;
					_self.shuyi=false;
					_self.shusi=false;
					_self.shuwu=false;
					_self.shuliu=false;
				}else if($(this).index()==3){
					_self.shusi=true;
					
					_self.shuer=false;
					_self.shusan=false;
					_self.shuyi=false;
					_self.shuwu=false;
					_self.shuliu=false;
				}else if($(this).index()==4){
					_self.shuwu=true;
					
					_self.shuer=false;
					_self.shusan=false;
					_self.shusi=false;
					_self.shuyi=false;
					_self.shuliu=false;
				}else if($(this).index()==5){
					_self.shuliu=true;
					
					_self.shuer=false;
					_self.shusan=false;
					_self.shusi=false;
					_self.shuwu=false;
					_self.shuyi=false;
				}
				
				$(this).children("span").css({"color":"#0091FF"})
				$(this).siblings().children("span").css({"color":"#333333"})
				
				var shujuyanjiu_shu1=$(".shujuyanjiu2_1 ul li").eq(0).offset().left
				var shujuyanjiu_shu=$(this).offset().left;
				$(this).parents("ul").siblings(".xiaxian").css({"left":shujuyanjiu_shu-shujuyanjiu_shu1+"px"})
			})
			
			//热门资讯
			$(".remenzixun ul li").hover(function(){
				// console.log($(this).offset().top);
				var zixun_shu=$(this).offset().top;
				var zixun_shu1=$(".remenzixun ul li").eq(0).offset().top;
				
				$(this).parent('ul').siblings(".shuju_huatu").css({"top":zixun_shu-zixun_shu1-zixun_shu1*0.005+'px',"display":"block"})
			})
			$(".remenzixun ul").hover(function(){},function(){
				$(this).siblings(".shuju_huatu").css({"display":"none"})
			})
			window.addEventListener("scroll",this.handlescroll);
			
			for(let i=0;i<$(".shujuyanjiu2_1 ul li").length;i++){
				$(".shujuyanjiu2_1 ul li").eq(i).css({
					'animation-delay': i*0.1+0.25+'s'
				})
			}
			for(let i=0;i<$(".shuju_darenbang .darenbang_shu").length;i++){
				$(".shuju_darenbang .darenbang_shu").eq(i).css({
					'animation-delay': i*0.1+0.25+'s'
				})
			}
			for(let i=0;i<$(".shuju_renzi .remenzixun ul li").length;i++){
				$(".shuju_renzi .remenzixun ul li").eq(i).css({
					'animation-delay': i*0.1+0.25+'s'
				})
			}
			$(".shujuyanjiu2_1 ul li").addClass("animate__animated animate__rollIn")
			$(".shuju_darenbang .darenbang_shu").addClass("animate__animated animate__fadeInUp")
			
			// console.log($(".shujuyanjiu2_1 ul li").offset().top/1.8,"jsdj")
			
		},
		destroyed() {
			window.removeEventListener('scroll',this.handlescroll,false)
		},
		methods:{
			handlescroll(){
				var scrollT=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				// console.log(scrollT);
				
				if(scrollT<$(".shuju_renzi").offset().top*0.4){
					$(".shuju_renzi .remenzixun ul li").removeClass("animate__animated animate__fadeInUp")
				}
				if(scrollT>=$(".shuju_renzi").offset().top*0.4){
					$(".shuju_renzi .remenzixun ul li").addClass("animate__animated animate__fadeInUp")
				}
				
				if(scrollT<$(".shuju_renzi").offset().top*0.9){
					$(".shuju_darenbang .darenbang_shu").addClass("animate__animated animate__fadeInUp")
				}
				if(scrollT>=$(".shuju_renzi").offset().top*0.9){
					$(".shuju_darenbang .darenbang_shu").removeClass("animate__animated animate__fadeInUp")
				}
				
				if(scrollT<$(".shujuyanjiu2_1 ul li").offset().top*0.95){
					$(".shujuyanjiu2_1 ul li").addClass("animate__animated animate__rollIn")
				}
				if(scrollT>=$(".shujuyanjiu2_1 ul li").offset().top*0.95){
					$(".shujuyanjiu2_1 ul li").removeClass("animate__animated animate__rollIn")
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shujuyanjiu{
		background-color: #F7F9FF;
		.banner_tou{
			margin-bottom:1% ;
			
			img{
				width: 46.7rem;
			}
		}
		
		.shujuyanjiu1{
			width: 64%;
			margin: auto;
			border-radius:0.4rem ;
			background-color: #fff;
			margin-top:1.2rem ;
			
			.shujuyanjiu2{
				float: left;
				width: 69%;
				height: 40rem;
				box-shadow: 0 0 0.6rem rgba(0,0,0,0.2);
				padding: 0 1rem;
				box-sizing: border-box;
				
				.shujuyanjiu2_1{
					margin-top:0.6rem ;
					position: relative;
					
					ul{
						list-style: none;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text-align: center;
						border-bottom:1px solid #F2F2F2 ;
						
						li{
							padding: 0.8rem 0;
							cursor:pointer;
							img{
								width: 0.5rem;
								height: 0.5rem;
								float: left;
							}
							
							span{
								font-size: 0.4rem;
								color: #333333;
								display: block;
								float: left;
								margin-left:0.3rem ;
							}
						}
						li:nth-of-type(1) span{
							color: #0091FF;
						}
						li:hover span{
							color: #0091FF;
						}
					}
					.xiaxian{
						transition: all 0.5s ease;
						width: 2.6rem;
						height: 0.1rem;
						border-radius:0.4rem ;
						background-color: #0091FF;
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}
				
			}
			.shujuyanjiu3{
				float: right;
				width: 29%;
				box-shadow: 0 0 0.6rem rgba(0,0,0,0.2);
				padding:0 0.3rem;
				box-sizing: border-box;
			}
		}
		.shujuyanjiu1::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.shuju_darenbang{
			margin-top:1rem ;
			
			.shuju_darenbang1{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				
				span{
					font-weight: 600;
					font-size: 0.5rem;
					display: inline-block;
					margin-left:0.8rem ;
					margin-top:0.8rem ;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.6rem;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #1890FF;
				}
			}
			.daren_tu{
				text-align: center;
				padding: 0.8rem 0;
				border-bottom:1px solid #F2F2F2 ;
				position: relative;
				
				img{
					width: 7rem;
				}
				
				.daren_yin{
					margin: 0.4rem 0.55rem 2rem 0.6rem;
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					cursor: pointer;
					
					.daren_yin1{
						height: 3rem;
						
						.shipin_dianzan{
							background-color: rgba(0,0,0,0.4);
							border-radius:0.6rem ;
							float: right;
							padding: 0.15rem 0.3rem;
							margin-top:0.8rem ;
							margin-right:0.4rem ;
							display: inline;
							
							font-size: 0.3rem;
							color: #fff;
						}
					}
					.daren_yin2{
						background-color: rgba(0,0,0,0.5);
						padding: 0.3rem 0.5rem;
						box-sizing: border-box;
						text-align: left;
						width: 100%;
						
						p:nth-of-type(1){
							color: #fff;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
						p:nth-of-type(2){
							color: #fff;
							font-size: 0.3rem;
							margin-top:0.2rem ;
						}
					}
				}
			}
			
			.darenbang_shu{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom:1px solid #F2F2F2 ;
				padding: 0.6rem 0.6rem;
				cursor: pointer;
				
				span:nth-of-type(1){
					display: inline-block;
					flex: 2;
					color: #333333;
					font-size: 0.4rem;
					
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box; 
					-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
					-webkit-box-orient: vertical;
				}
				span:nth-of-type(2){
					display: inline-block;
					flex: 1;
					color: #CFCFCF;
					font-size: 0.35rem;
					text-align: right;
					
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box; 
					-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
					-webkit-box-orient: vertical;
				}
			}
			.darenbang_shu:hover span{
				color: #0091FF;
			}
		}
		
		.shuju_renzi{
			margin-top:1rem ;
			
			.shuju_renzi1{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				
				span{
					font-weight: 600;
					font-size: 0.5rem;
					display: inline-block;
					margin-left:0.8rem ;
					margin-top:0.8rem ;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.6rem;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #1890FF;
				}
			}
			.remenzixun{
				border-bottom:1px solid #F2F2F2 ;
				margin-top:0.3rem ;
				position: relative;
				
				ul{
					list-style: none;
					li{
						position: relative;
						cursor: pointer;
						padding: 0.4rem 2rem 0.4rem 1rem;
						
						span:nth-of-type(1){
							position: absolute;
							top: -0.2rem;
							left: 0.3rem;
							display: block;
							img{
								width: 0.4rem;
								height: 0.5rem;
							}
						}
						
						span:nth-of-type(2){
							display: block;
							color: #333333;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
						span:nth-of-type(3){
							display: block;
							color: #CFCFCF;
							font-size: 0.35rem;
							margin-top:0.3rem ;
						}
					}
					li:hover span{
						color: #1890FF;
					}
				}
				
				.shuju_huatu{
					display: none;
					transition: all 0.5s ease;
					position: absolute;
					top: -0.2rem;
					left: 0.3rem;
					img{
						width: 0.4rem;
						height: 0.5rem;
					}
				}
				
			}
		}
	}
</style>
